<template>
	<view class="wrapper">
		<view class="header flex-start">
			<view v-for="(item, index) in tabList" :key="index" :class="['item', index ===tabIndex && 'active']" @click="clickTab(index)">{{ item }}</view>
		</view>
		<view class="title">打赏总额</view>
		<view class="money">¥{{ totalMoney || 0 }}</view>
		<view class="list-item flex-between" v-for="(item, index) in tableData" :key="index" @click="joinPath(item)">
			<view class="list-left">
				<view class=" flex-start">
					<view class="head-img-all">
						<image :src="img_url + item.avatar" class="head-img"></image>
						<image v-if="item.starFlag === '1'" src="/static/img/community/ic_daka.png" class="icon"></image>
					</view>
					<view class="name">{{ item.nickName }}</view>
				</view>
				<view class="desc">{{ item.title }}</view>
				<view class="time">打赏时间：{{ item.rewardTime }}</view>
			</view>
			<view class="money-item">¥{{ item.rewardAmount }}</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'
	import apis from '@/apis.js'
	export default {
		data() {
			return {
				listQuery: {
					pageNo: 1,
					pageSize: 10,
					type: 1
				},
				tabIndex: 0,
				tabList: ['打赏', '被打赏'],
				tableData: [],
				totalMoney: 0
			}
		},
		computed: {
			...mapState(['img_url']),
		},
		onLoad() {
			this.getList()
			this.getRewardMoney()
		},
		methods: {
			joinPath(item) {
				uni.navigateTo({
					url: '/pages/tabbar/tabbar-1/post-detail?id=' + item.artId
				})
			},
			/**
			 *  @function 获取打赏总金额
			 */
			getRewardMoney() {
				this.$http.get(apis.query_amount, this.listQuery).then(res => {
					if (res.data.code === 200) {
						this.totalMoney = res.data.result
					}
				})
			},
			clickTab(index) {
				this.tabIndex = index
				this.listQuery.type = index + 1
				this.listQuery.pageNo = 1
				this.tableData = []
				this.getList()
				this.getRewardMoney()
			},
			/**
			 *  @function 获取打赏记录
			 */
			getList() {
				this.$http.get(apis.reward_report_list, this.listQuery).then(res => {
					if (res.data.code === 200) {
						this.tableData = this.tableData.concat(res.data.result.records)
					}
				})
			}
		},
		onReachBottom() {
			this.listQuery.pageNo += 1
			this.listQuery.pageSize = 10
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	@import "uview-ui/index.scss";
.wrapper{
	padding: 0 20px;
	.header {
		font-size: 14px;
		margin-top: 20px;
		.item {
			margin: 0 10px;
		}
		.active {
			color: #21D2FF;
		}
	}
	.title{
		color: #000000;
		font-size: 20px;
		text-align: center;
		margin: 20px 0;
		font-weight: bold
	}
	.money{
		color: #21D2FF;
		font-size: 60px;
		text-align: center;
		border-bottom: 1px solid #BFBFBF;
		padding-bottom: 16px;
	}
	.list-item{
		padding: 16px 0;
		border-bottom: 1px solid #BFBFBF;
		.list-left{
			position: relative;
			.head-img-all{
				position: relative;
				width: 48px;
				height: 48px;
				.head-img{
					width: 48px;
					height: 48px;
					background: #4D5B80;
					border-radius: 50%;
					opacity: 1;
				}
				.icon{
					width: 20px;
					height: 23.6px;
					position: absolute;
					bottom: 0;
					right: -5px;
				}
			}
			.name{
				font-size: 16px;
				color: #4D5B80;
				margin-left: 10px;
			}
		}
		.time{
			color: $econdary-word-color;
			font-size: 14px;
			line-height: 30px;
		}
		.desc{
			color: #000000;
			font-size: 16px;
			line-height: 30px;
		}
		.money-item{
			color: #4D5B80;
			font-size: 28px;
		}
	}
}
</style>
